<template>
    <div class="m" v-show="show">
        <div class="main" :style="{ '--top': eleTop + 'px' }">

            <div class="item" v-for="(item, i ) in lessonList" :key="i">
                {{ item.name }}
            </div>



        </div>
    </div>

</template>
<script setup>
// 获取html元素
document.getElementsByTagName("html")[0].style.background = "rgba(0, 0, 0, 0)"
import { v4 as uuidv4 } from "uuid"
import { ref, onMounted } from "vue"
import sk from "@/assets/sk.mp3"
let eleTop = ref(0)
const lessonList = ref([])
const msg = new BroadcastChannel("on_msg")
const show = ref(true)
let le = [{
    type: "morningReading",
    name: "数学",
    teacher: ["张三", "李四"],
    time: [
        "6:45",
        "7:30"
    ],
},
{
    type: "finishClass",
    time: [
        "7:30",
        "7:45",
    ]
},
{
    type: "lesson",
    name: "数学",
    teacher: ["张三", "李四"],
    time: [
        "7:45",
        "8:30",
    ],
}
    ,
{
    type: "finishClass",
    time: [
        "8:30",
        "8:45",
    ]
},
{
    type: "lesson",
    name: "数学",
    teacher: ["张三", "李四"],
    time: [
        "8:45",
        "9:30",
    ],
}
    ,
{
    type: "bigBreak", // 大课间
    time: [
        "9:30",
        "10:00",
    ]
},
{
    type: "lesson",
    name: "数学",
    teacher: ["张三", "李四"],
    time: [
        "10:00",
        "10:45",
    ],
},
{
    type: "finishClass",
    time: [
        "10:45",
        "11:00"
    ]
},
{
    type: "lesson",
    name: "数学",
    teacher: ["张三", "李四"],
    time: [
        "11:00",
        "11:45",
    ],
},
{
    type: "lunch",
    time: [
        "11:45",
        "12:10",
    ]
},
{
    type: "lesson",
    name: "数学",
    teacher: ["张三", "李四"],
    time: [
        "12:10",
        "12:11",
    ],
},
{
    type: "noonBreak",
    time: [
        "12:11",
        "12:12",
    ]
},
{
    type: "lesson",
    name: "数学",
    teacher: ["张三", "李四"],
    time: [
        "12:12",
        "12:13",
    ],
},
{
    type: "finishClass",
    time: [
        "12:13",
        "12:14",
    ]
},
{
    type: "lesson",
    name: "数学",
    teacher: ["张三", "李四"],
    time: [
        "12:14",
        "12:20",
    ],
},
{
    type: "finishClass",
    name: "课间",
    time: [
        "12:20",
        "12:21",
    ]
},
{
    type: "lesson",
    name: "数学",
    teacher: ["张三", "李四"],
    time: [
        "12:21",
        "12:22",
    ],
},
{
    type: "finishClass",
    time: [
        "12:22",
        "12:23",
    ]
},
{
    type: "afternoonClass",
    name: "数学",
    teacher: ["张三", "李四"],
    time: [
        "12:23",
        "12:24",
    ],
},
{
    type: "over",
    time: [
        "15:30",
    ]
}]

let l = [{
    type: "morningReading",
    name: "数学",
    teacher: ["张三", "李四"],
    time: [
        "6:45",
        "7:30"
    ],
},
{
    type: "finishClass",
    name: "课间",
    time: [
        "7:30",
        "7:45",
    ]
},
{
    type: "lesson",
    name: "数学",
    teacher: ["张三", "李四"],
    time: [
        "7:45",
        "8:30",
    ],
}
    ,
{
    type: "finishClass",
    name: "课间",
    time: [
        "8:30",
        "8:45",
    ]
},
{
    type: "lesson",
    name: "数学",
    teacher: ["张三", "李四"],
    time: [
        "8:45",
        "9:30",
    ],
}
    ,
{
    type: "bigBreak", // 大课间
    name: "大课间",
    time: [
        "9:30",
        "10:00",
    ]
},
{
    type: "lesson",
    name: "数学",
    teacher: ["张三", "李四"],
    time: [
        "10:00",
        "10:45",
    ],
},
{
    type: "finishClass",
    name: "课间",
    time: [
        "10:45",
        "11:00"
    ]
},
{
    type: "lesson",
    name: "数学",
    teacher: ["张三", "李四"],
    time: [
        "11:00",
        "11:45",
    ],
},
{
    type: "lunch",
    name: "午餐",
    time: [
        "11:45",
        "12:15",
    ]
},
{
    type: "lesson",
    name: "数学",
    teacher: ["张三", "李四"],
    time: [
        "12:15",
        "12:15",
    ],
},
{
    type: "noonBreak",
    name: "午休",
    time: [
        "12:15",
        "12:16",
    ]
},
{
    type: "lesson",
    name: "数学",
    teacher: ["张三", "李四"],
    time: [
        "12:27",
        "12:28",
    ],
},
{
    type: "finishClass",
    name: "课间",
    time: [
        "12:28",
        "12:29",
    ]
},
{
    type: "lesson",
    name: "音乐",
    teacher: ["张三", "李四"],
    time: [
        "12:29",
        "12:30",
    ],
},
{
    type: "finishClass",
    name: "课间",
    time: [
        "12:30",
        "12:31",
    ]
},
{
    type: "lesson",
    name: "数学",
    teacher: ["张三", "李四"],
    time: [
        "12:31",
        "12:32",
    ],
},
{
    type: "finishClass",
    name: "课间",
    time: [
        "12:32",
        "12:33",
    ]
},
{
    type: "lesson",
    name: "英语",
    teacher: ["张三", "李四"],
    time: [
        "12:33",
        "12:34",
    ],
},
]
let table = ref([
    l, l, l, l, l, null, l
])
for (let i = 0; i < table.value[0].length; i++) {
    if (table.value[i]) {
        for (let j = 0; j < table.value[i].length; j++) {
            table.value[i][j].id = uuidv4()
        }
    }

}

print(table.value)

onMounted(() => {
    let week = getWeek()

    let list = []
    if (table.value[week - 1] == null) {
        show.value = false
        return
    }
    for (let i = 0; i < table.value[week - 1].length; i++) {
        let ele = table.value[week - 1][i];
        if (ele.type === "lesson" || ele.type === "morningReading" || ele.type === "afternoonClass") {
            list.push({
                name: YsMap(ele.name),
                type: ele.type,
                teacher: ele.teacher,
                time: ele.time
            })
        }
    }
    lessonList.value = list
    print(list)
})

console.log(table);

function YsMap(name) {
    for (let i = 0; i < ysMap.length; i++) {
        if (name === ysMap[i]) {
            return dzMap[i]
        }
    }
    // 没有就返回name的第一个字
    return name[0]
}
let isTX = false
let lsatId = ""
function panduanTime() {

    // 获取当前unix时间戳
    let nowTime = new Date().getTime() / 1000;
    console.log(nowTime);
    // 获取当前星期几
    let week = getWeek()
    console.log(week);
    if (table.value[week - 1] == null) {
        show.value = false
        return
    }
    // 处于当前时间的课程
    let list = []
    for (let i = 0; i < table.value[week - 1].length; i++) {
        let ele = table.value[week - 1][i];

        if (ele.type === "lesson" || ele.type === "morningReading" || ele.type === "afternoonClass") {
            list.push({
                name: YsMap(ele.name),
                type: ele.type,
            })
        }
        for (let j = 0; j < ele.time.length; j++) {
            let tableTime = getUnixTime(ele.time[j]);
            if (tableTime >= nowTime) {
                print(ele.type, ele.time, ele.name)
                let time = tableTime - nowTime;

                if (!isTX) {
                    if (time < 60 * 5) {
                        if (ele.type !== "lesson" && ele.type !== "morningReading" && ele.type !== "afternoonClass") {
                            msg.postMessage("距离下课还有" + Math.floor(time / 60) + "分钟")

                        } else {
                            msg.postMessage("距离上课还有" + Math.floor(time / 60) + "分钟")

                            let muic = new Audio(sk)
                            muic.play()

                        }

                        isTX = !isTX
                    }
                }
                // 计算距离下课的时间
                /* if (ele.time.length > 1) {
                    let time = tableTime - nowTime;
                    print("距离下课还有", time / 60, "分钟")
                    // 根据ysMap 和 dzMap 将课程名称转换为简写
                    for (let k = 0; k < ysMap.length; k++) {
                        if (ele.name === ysMap[k]) {
                            print(dzMap[k])
                        }
                    }
                } */


                eleTop.value = (list.length - 1) * 80

                // 通过lastId判断课程是否发生改变
                if (lsatId == "") {
                    lsatId = ele.id
                    return
                } else if (ele.id != lsatId) {
                    let nl = findNextLesson(lsatId)
                    let nowLess = findLesson(lsatId)
                    if (nl) {
                        msg.postMessage(nowLess.name + " 结束，" + nl.name + " 将开始")
                        isTX = !isTX

                    } else {
                        msg.postMessage(nowLess.name + " 结束")
                        isTX = !isTX
                        return
                    }

                    lsatId = ele.id
                    print(ele)
                }


                return
            }
        }
    }






    // 写一个辅助函数，将hh:mm 转换为当天的unix时间戳
    function getUnixTime(timeStr) {
        let [h, m] = timeStr.split(':').map(Number);
        let now = new Date().toISOString().split('T')[0];
        return new Date(`${now} ${h}:${m}`).getTime() / 1000;
    }

    function findLesson(id) {
        // 在table中找id对应的课程
        for (let i = 0; i < table.value[week - 1].length; i++) {
            if (table.value[week - 1][i].id === id) {
                return table.value[week - 1][i]
            }
        }
    }
    function findNextLesson(id) {
        // 在table中找id对应的下一个课程
        for (let i = 0; i < table.value[week - 1].length; i++) {
            // 当为最后一个课程时，返回空
            if (i === table.value[week - 1].length - 1) {
                return null
            }
            // 当找到id对应的课程时，返回下一个课程
            if (table.value[week - 1][i].id === id) {
                return table.value[week - 1][i + 1]
            }


        }


    }
}


function getWeek() {
    let week = new Date().getDay()
    if (week === 0) {
        return 7
    } else {
        return week
    }
}

let ysMap = [
    "语文",
    "数学",
    "英语",
    "物理",
    "化学",
    "生物",
    "政治",
    "历史",
    "地理",
    "体育",
    "美术",
    "音乐",
    "信息技术",
    "综合",
    "通用",
    "社团",
    "班会"
]
let dzMap = [
    "语",
    "数",
    "英",
    "物",
    "化",
    "生",
    "政",
    "史",
    "地",
    "体",
    "术",
    "音",
    "技",
    "综",
    "通",
    "社",
    "班"
]
setInterval(panduanTime, 1000)
</script>

<style scoped>
.m {
    /*flex布局，靠右，竖直居中*/
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100vh;
}

.main {
    width: 80px;
    background-color: #5252527a;
    border-radius: 10px;
    box-shadow: 0px 2px 10px #333;
    z-index: 999;
}





.main .item {
    width: 80px;
    height: 80px;
    font-size: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    border-radius: 10px;

}

.main::before {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    background-color: #ffffff7a;
    border-radius: 10px;
    margin-top: var(--top);
    transition: all 0.5s;
}
</style>